import React from 'react'
import { Row, Col, Card, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import {
  PlusOutlined,
  AppstoreOutlined,
  LineChartOutlined,
  RadarChartOutlined
} from '@ant-design/icons'
import { useBreakpoint } from '@/hooks/useBreakpoint'

interface ActionCardProps {
  icon: React.ReactNode
  title: string
  description: string
  color: string
  onClick: () => void
}

const ActionCard: React.FC<ActionCardProps> = ({ 
  icon, 
  title, 
  description, 
  color,
  onClick 
}) => {
  return (
    <Card
      hoverable
      className="text-center cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
      onClick={onClick}
      style={{ borderTop: `3px solid ${color}` }}
    >
      <div className="py-4">
        <div 
          className="text-4xl mb-3"
          style={{ color }}
        >
          {icon}
        </div>
        <h4 className="font-semibold text-base mb-2">{title}</h4>
        <p className="text-gray-500 text-sm m-0">{description}</p>
      </div>
    </Card>
  )
}

const QuickActionCards: React.FC = () => {
  const navigate = useNavigate()
  const breakpoint = useBreakpoint()
  const isMobile = breakpoint === 'mobile'

  const showComingSoon = (feature: string) => {
    message.info(`${feature}功能开发中...`)
  }

  const actions = [
    {
      icon: <PlusOutlined />,
      title: '新建项目',
      description: '创建新的写作项目',
      color: '#1890ff',
      onClick: () => navigate('/projects?create=true')
    },
    {
      icon: <AppstoreOutlined />,
      title: '浏览模板',
      description: '探索写作模板库',
      color: '#52c41a',
      onClick: () => showComingSoon('浏览模板')
    },
    {
      icon: <LineChartOutlined />,
      title: '查看分析',
      description: '数据统计与分析',
      color: '#722ed1',
      onClick: () => showComingSoon('查看分析')
    },
    {
      icon: <RadarChartOutlined />,
      title: '热点雷达',
      description: '发现热门话题',
      color: '#fa8c16',
      onClick: () => navigate('/hot-radar')
    }
  ]

  // 移动端：横向滚动卡片（由父容器 .quick-actions-scroll 处理）
  if (isMobile) {
    return (
      <>
        {actions.map((action, index) => (
          <div key={index} style={{ minWidth: '140px', flexShrink: 0 }}>
            <ActionCard {...action} />
          </div>
        ))}
      </>
    )
  }

  // 桌面端：网格布局
  return (
    <div>
      <h3 className="text-lg font-semibold mb-4">快速开始</h3>
      <Row gutter={[16, 16]}>
        {actions.map((action, index) => (
          <Col xs={12} sm={12} md={6} lg={6} key={index}>
            <ActionCard {...action} />
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default React.memo(QuickActionCards)

export { QuickActionCards }